<template>
    <div class="my-account">
        <div class="bg">
            <div class="flex-wrap">
                <div style="margin-top: 16px;text-align: left;">
                    <ul style="white-space: nowrap">
                        <span v-if="user.nickName" style="font-size: 20px;">
                            {{user.nickName}}
                        </span>
                        <span v-else>暂无昵称</span>
                        <router-link to="accountInfo">
                            <icon clazz="icon-guanyuwomen" style="width: 20px;height: 16px;"></icon>
                        </router-link>
                    </ul>
                    <ul>
                        <span style="opacity: 0.9;">{{user.name}}</span>
                    </ul>
                    <ul style="margin-top: -10px;font-size: 13px;">
                        <span style="opacity: 0.9;">
                            已绑定户号 <mt-badge size="small" type="error">{{user.countTerminalBind}}</mt-badge>个
                        </span>
                    </ul>
                </div>
                <div>
                    <img :src="avatarUrl" style="border-radius: 50%;height: 130px;width: 130px;margin-top: 20px;">
                </div>
            </div>
        </div>
        <!--<div class="break"></div>-->
        <div :style="{height: height+'px','overflow-y':'auto'}">
            <mt-cell v-if="platform!=='wechat'" title="密码修改" is-link to="/passwordChange"></mt-cell>
            <mt-cell title="参数设置" is-link to="/accountTidings"></mt-cell>
            <div class="break"></div>
            <mt-cell title="意见反馈" is-link to="/accountFeedback"></mt-cell>
            <mt-cell title="推荐分享" is-link to="/accountShare"></mt-cell>
            <mt-cell title="关于我们" is-link to="/accountAboutUs"></mt-cell>
            <mt-cell title="版本更新" v-if="platform==='mobile'">
                <div style="margin-right: 10px;opacity: 0.6;">
                    当前版本号:{{version}}
                </div>
                <div style="margin-right: 30px;">
                    <mt-badge type="error" v-if="newVersion">1</mt-badge>
                </div>
                <div class="mint-cell-allow-right" @click="clickVersion"></div>
            </mt-cell>
            <template v-if="platform!=='wechat'">
                <div class="break"></div>
                <mt-button type="danger" @click="clickExitLogin">退出登录</mt-button>
            </template>
        </div>
    </div>
</template>
<script>
    import CGrid from '../../components/CGrid'
    import CLoginModule from '../../components/CLoginModule'

    export default {
        components: {CGrid, CLoginModule},
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top - 72 + 15 - app.config.setting.statusHeight - 160,
                user: {
                    avatar: '',
                    name: '',
                    nickName: '',
                    countTerminalBind: 0
                },
                platform: app.config.setting.platform,
                grid: {
                    data: [
                        {
                            icon: 'icon-qiehuan2',
                            label: '切换户号'
                        }, {
                            icon: 'icon-anquanguanli',
                            label: '安全管理'
                        }, {
                            icon: 'icon-changjianwenti',
                            label: '常见问题'
                        }, {
                            icon: 'icon-weichongxuanxidiehua',
                            label: '关于我们'
                        }
                    ]
                },
                version: app.config.setting.version,
                newVersion: app.config.setting.newVersion
            }
        },
        computed: {
            avatarUrl() {
                return this.user.avatar && ((this.user.avatar.startsWith("http://") ? '' : app.config.setting.serverAsset) + this.user.avatar);
            }
        },
        methods: {
            clickVersion() {
                if (this.newVersion) {
                    // 下载wgt文件
                    app.util.upgradeWgt(app.config.setting.wgtUrl);
                } else {
                    this.$messagebox.alert('已经是最新版本', '系统提示');
                }
            },
            loadData() {
                app.ajax.get(app.config.api.account.user, {}, (res) => {
                    Object.assign(this.user, res.data);
                });
            },
            clickExitLogin() {
                this.$messagebox.confirm('确定退出当前账户?').then(action => {
                    app.util.sessionStorage('token', '');
                    app.util.localStorage('user.name', '');
                    app.util.localStorage('user.address', '');
                    app.util.localStorage('user.householdNo', '');
                    app.util.localStorage('user.chargeWayTxt', '');
                    this.$router.push({path: '/login'});
                }).catch(err => {
                    console.log('exit', err);
                });
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>
<style>
    .my-account .bg {
        width: 100%;
        height: 160px;
        background-image: -webkit-gradient(linear, 20% 0, 35% 170%, from(#26A2FF), color-stop(.5, #26A2FF), color-stop(.5, white), to(white));
        background-size: 100% 160px;
    }

    .my-account .bg p {
        margin: 5px 10px !important;
    }

    .my-account .flex-wrap div {
        width: 50%;
        color: white;
    }

    .my-account .mint-button--normal {
        width: 100%;
        margin-bottom: 10px;
    }
</style>
